<template>
  <div class="comment">
    <div class="title">
      精选留言 ({{ total }})_
    </div>
    <div class="input-line">
      <img
        :src="userInfo.portrait"
        alt=""
        class="head-img"
      >
      <div class="input-box">
        <div class="bg-input">
          <input
            v-model="content"
            type="text"
            maxlength="140"
            placeholder="140字以内，留言经过筛选后对所有人可见..."
          >
        </div>

        <span @click="senddata">发表</span>
      </div>
    </div>
    <div class="comment-list">
      <div
        v-for="item in list"
        :key="item.id"
        class="list-item"
      >
        <img
          :src="item.avatar"
          alt=""
        >
        <div class="comment-info">
          <p class="name">
            <span class="username">{{ item.nickname }}</span>
            <span class="time">{{ item.create_time_text }}</span>
          </p>
          <p class="contenttext">
            {{ item.content }}
          </p>
        </div>
      </div>
    </div>
    <Topic ref="Topic" />
  </div>
</template>

<script>
import Topic from "./hot.vue";
export default {
  name: "",
  components: {
    Topic,
  },
  data() {
    return {
      list: [],
      page: 1,
      userInfo: JSON.parse(localStorage.getItem("userInfo")) || {},
      total: 0,
      content: "",
      id: "",
      class_id: "",
    };
  },
  methods: {
    getList(id, classid, shopId) {
      this.id = id;
      this.class_id = classid;
      this.$refs.Topic.getData(shopId)
      let param = {
        topic_id: id,
        page: this.page,
        limit: 20,
      };
      if (this.page == 1) {
        this.list = [];
      }
      this.$api.home.comment(param).then((res) => {
        if (res.code == 1) {
          this.total = res.data.total;
          this.list = this.list.concat(res.data.data);
        }
      });
    },
    senddata() {
      let param = {
        uid: this.userInfo.mid,
        topic_id: this.id,
        content: this.content,
        is_private: 0,
        class_id: this.class_id,
      };
      this.$api.home.addComment(param).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.content = "";
          this.page = 1;
          this.getList(this.id);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;

  .title {
    height: 3.75rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    padding-left: 2.44rem;
    background: #fff;
  }

  .input-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.13rem;
    margin-top: 1.63rem;

    .head-img {
      height: 4.13rem;
      width: 4.13rem;
      object-fit: contain;
      border-radius: 50%;
      margin-right: 0.88rem;
    }

    .input-box {
      flex: 1;
      display: flex;
      height: 100%;
      justify-content: flex-start;
      align-items: center;

      .bg-input {
        width: 88%;
        height: 100%;
        background: url(../../assets/topic/23@2x.png) no-repeat;
        padding-left: 1.9rem;

        input {
          width: 90%;
          height: 100%;
          color: #333;
          outline: none;
          font-size: 1rem;
          font-family: Microsoft YaHei;
          font-weight: 400;

          &::-webkit-input-placeholder {
            font-size: 1rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(166, 166, 166, 1);
          }
        }
      }

      span {
        display: inline-flex;
        height: 100%;
        flex: 1;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        background: #f3406f;
        cursor: pointer;
      }
    }
  }

  .comment-list {
    display: flex;
    flex-direction: column;
    margin-top: 2rem;
    margin-bottom: 6rem;

    .list-item {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 1.13rem;

      img {
        height: 4.13rem;
        width: 4.13rem;
        object-fit: contain;
        border-radius: 50%;
        margin-right: 2.13rem;
      }

      .comment-info {
        height: 100%;
        flex: 1;
        padding-right: 5.3rem;
        border-bottom: 1px solid #bdbdbd;

        .name {
          display: flex;
          align-items: flex-end;
          margin-top: 0.88rem;

          .username {
            font-size: 1rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
          }

          .time {
            margin-left: 0.69rem;
            font-size: 1rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(199, 199, 199, 1);
          }
        }

        .contenttext {
          font-size: 1rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(68, 68, 68, 1);
          margin-top: 1.44rem;
          line-height: 1.55rem;
          margin-bottom: 1.31rem;
        }
      }
    }
  }
}
</style>
